<template>
  <div class="remoteControlConfig">
  <div class="showConfig font14">
    {{$t('configLazyLoad.remoteControl.tips4')}}
    <el-radio-group v-model.trim="sendCSR">
      <el-radio :label="false">{{$t('configLazyLoad.public.noReuse')}}</el-radio>
      <el-radio :label="true">{{$t('configLazyLoad.public.reuse')}}</el-radio>
    </el-radio-group>
  </div>
  <div class="satisfied" v-show="sendCSR">
    <div class = "header">
      <el-button class = "iconfont icon-zhankai"
                 @click = "addTag"><span>{{$t('public.add')}}</span></el-button>
      <el-button class = "iconfont icon-shuaxin"
                 :loading = "refreshLoading"
                 @click = "refresh"><span>{{$t('public.refresh')}}</span></el-button>
    </div>
    <div class="drag thead">
      <div class="item">{{$t('configLazyLoad.channel.option')}}</div>
      <div class="tag">{{$t('configLazyLoad.channel.tagLine')}}</div>
      <div class="item opt">{{$t('public.operate')}}</div></div>
    <!-- 无评价的提示 -->
    <div class="footer" v-show = "remoteControlCSRDic.length === 0">{{$t('configLazyLoad.channel.mailTip39')}}</div>
    <draggable class="list-group"
               :options="dragOptions"
               :list="remoteControlCSRDic">
      <div v-for="(item, index) in remoteControlCSRDic" class="drag">
        <div class="item sdsd">
          <!-- 设置拖动的元素 透明度为0 占位 -->
          <div class="move">{{$t('configLazyLoad.channel.mailTip40')}}</div>
          <el-input v-model="item.name"
                    size="mini"
                    @blur = "isNull(index)"
                    :maxlength="8"
                    :placeholder = "item.nameTip ? item.nameTip : ''"></el-input></div>
        <div class="tag">
          <el-input v-for="(i, index) in 3"
                    size="mini"
                    :maxlength="6"
                    v-model="item.reason[i-1]"
                    :placeholder = "item.conten ? item.conten[i -1] : ''"
                    :class = "[index < 3 ? 'ipt' : '']"></el-input></div>
        <div class="item del">
                <span @click="del(index)"
                      class="btn_del">{{$t('public.delete')}}</span></div>
      </div>
    </draggable>
  </div>
  <div class="wrap-save">
    <el-button type = "primary"
               @click = "save"
               class = "save primary_btn">{{$t('public.save')}}</el-button></div>
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  import {deepClone} from '@/utils/m7Utils'
  import * as uuid from 'uuid'
  export default {
    name: 'remoteControlConfig',
    data () {
      return {
        remoteControlCSRDic: [],
        refreshLoading: false,
        _id: '',
        sendCSR: false
      }
    },
    methods: {
      // 选项名称失去焦点触发的事件
      isNull (index) {
        if (!this.remoteControlCSRDic[index].name) {
          this.$message.error(this.$t('configLazyLoad.channel.optionMustInput', {index: (index + 1)}))
        }
      },
      // 添加一个满意度
      addTag () {
        if (this.remoteControlCSRDic.length === 4) {
          this.$message(this.$t('configLazyLoad.remoteControl.tips5'))
          return
        }
        // 保证每个input都能绑定一个
        // reason, conten 保存时不需要传的数据, 目的只是为了渲染满意度配置项,保存时有处理
        let tag = {
          name: '',
          index: this.remoteControlCSRDic.length,
          nameTip: this.$t('configLazyLoad.channel.example'),
          key: uuid.v1(),
          reason: ['', '', '', '', '', ''],
          conten: [
            this.$t('configLazyLoad.channel.exampl_1'),
            this.$t('configLazyLoad.channel.exampl_2'),
            this.$t('configLazyLoad.channel.exampl_3'),
            this.$t('configLazyLoad.channel.exampl_4')
          ]
        }
        this.remoteControlCSRDic.push(tag)
      },
      refresh () {
        this.refreshLoading = true
        window.setTimeout(() => {
          this.refreshLoading = false
        }, 400)
        this.getView()
      },
      // 删除一个满意度
      del (index) {
        this.remoteControlCSRDic.splice(index, 1)
      },
      // 获取满意度配置数据
      getView () {
        this.$store.dispatch('getRemoteControlCSRDic', {}).then(res => {
          if (res && res.success && res.data) {
            this._id = res.data._id
            this.sendCSR = res.data.sendCSR
            this.remoteControlCSRDic = this.inti(res.data.tags)
          } else {
            this.remoteControlCSRDic = []
          }
        })
      },
      // 初始化数据，保证每个input都会绑定一个数据
      inti (obj) {
        if (obj.length === 0) {
          return []
        }
        for (let j = 0; j < obj.length; j++) {
          for (let i = 0; i < 4; i++) {
            if (!obj[j].reason[i]) {
              obj[j].reason[i] = ''
            }
          }
        }
        console.log(obj)
        return obj
      },
      // 保存满意度配置
      save () {
        let isName = true
        // 判断选项名是否为空
        this.remoteControlCSRDic.map(item => {
          if (!item.name) {
            isName = false
          }
        })
        if (!isName) {
          this.$message.error(this.$t('configLazyLoad.channel.optionsMust'))
          return
        }
        let data = {
          _id: this._id,
          account: this.$store.state.session.account.account,
          sendCSR: this.sendCSR,
          tags: deepClone(this.remoteControlCSRDic)
        }
        for (let j = 0; j < data.tags.length; j++) {
          var _reason = []
          for (let i = 0; i < 4; i++) {
            if (data.tags[j].reason[i]) {
              _reason.push(data.tags[j].reason[i])
            }
          }
          if (data.tags[j].nameTip) {
            delete data.tags[j].nameTip
          }
          if (data.tags[j].conten) {
            delete data.tags[j].conten
          }
          data.tags[j].reason = _reason
          data.tags[j].index = j
        }
        console.log(data)
        this.$store.dispatch('saveRemoteControlCSRDic', data).then(res => {
          if (res && res.success) {
            this.$message.success(this.$t('configLazyLoad.channel.setSuccess'))
          }
        })
      }
    },
    props: {
    },
    components: {
      draggable
    },
    computed: {
      // 计算拖拽的配置
      dragOptions () {
        return {
          handle: '.move'
        }
      }
    },
    beforeMount () {
      this.getView()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .remoteControlConfig
    .showConfig
      padding 10px
    .satisfied
      .footer
        height 60px
        text-align center
        line-height 60px
        font-size 16px
        border-bottom 1px solid $c-tree
      .header
        padding 6px 10px
        height 34px
        line-height 34px
        .el-button
          margin-left 10px
        span
          cursor pointer
        .iconfont
          color $c-main
          font-size 12px
          border none
          padding 0
          span
            color $cf-gray2
            margin-left 6px
      .thead
      .drag:nth-child(even)
      .drag:hover
        background $c-card
      .drag
        padding 10px 20px 10px 16px
        display flex
        align-items center
        position relative
        border-bottom 1px solid $c-tree
        .del
          text-align right
          color $c-pink
          position relative
          .btn_del
            cursor pointer
            position absolute
            right 0
        .item
          width 20%
          .move
            position absolute
            width 100%
            height 100%
            opacity 0
            left 0
            top 0
            cursor move
        .tag
          display flex
          padding 0 20px
          flex-wrap wrap
          width 60%
          .el-input
            flex-basis 30%
            flex-grow 1
            padding 10px 10px 0 0
            flex-shrink 1
          .ipt
            padding-top 0
      .thead
        font-weight bold
        .opt
          text-align right
    .wrap-save
      height 30px
      padding 20px
      text-align right
</style>
